<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef1" :inline="true" label-width="68px">
            <el-form-item label="设备查询" prop="componentNumber">
                <el-input v-model="queryParams.componentNumber" placeholder="请输入设备编码" clearable style="width: 240px"
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            </el-form-item>
        </el-form>

        <!-- 表格数据 -->
        <el-table v-loading="loading" :data="componenTyList" >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="编号" prop="id" width="220" />
            <el-table-column label="设备名称" prop="componentName" min-width="420" />
            <el-table-column label="设备编码" prop="componentNumber" width="420" />
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>


</template>

<script setup name="Component1">
import { listComponent } from "@/api/factoryInfo/component/component";
const { proxy } = getCurrentInstance();
import { ref } from 'vue';

const openDataScope = ref(false);
const componenTyList = ref([]);
const total = ref(0);
const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        isRunning: 0
    },
});
const { queryParams, form, rules } = toRefs(data);

/** 查询角色列表 */
function getList() {
    listComponent(queryParams.value).then(response => {
        componenTyList.value = response.rows;
        total.value = response.total;
    });
}

getList();

/** 搜索按钮操作 */
function handleQuery() {
   queryParams.value.pageNum = 1;
   getList();
}

</script>